1. BottomNavBar widget

path: lib/widgets/bottom_nav.dart

Create widget class

                      class BottomNavBar extends StatelessWidget {

                      }
                      

create build()

                      Widget build(BuildContext context) {

                      }
                    

add BottomNavigationBar

                    Widget build(BuildContext context) {
                        return Container(
                          child:  BottomNavigationBar(
                              items: const <BottomNavigationBarItem>[
                                BottomNavigationBarItem(
                                  icon: Icon(Icons.search),
                                  label: 'Browse',
                                ),
                                BottomNavigationBarItem(
                                  icon: Icon(Icons.history),
                                  label: 'History',
                                ),
                                BottomNavigationBarItem(
                                  icon: Icon(Icons.settings),
                                  label: 'Settings',
                                ),
                              ],
                              currentIndex: controller.currentIndex.value,
                              selectedItemColor: Colors.pink,
                              onTap: controller.changePage,
                            ),

                        );
                      }

                    

include getxController in the widget

                      final LoginController controller = Get.put(LoginController());
                      

Complete code

                      import 'package:flutter/material.dart';
                      import 'package:vera/controllers/home_controller.dart';
                      import 'package:vera/controllers/login_controller.dart';
                      import 'package:get/get.dart';
                      import 'package:vera/controllers/login_controller.dart';

                      class BottomNavBar extends StatelessWidget {
                        @override

                        final LoginController controller = Get.put(LoginController());

                        Widget build(BuildContext context) {
                          return Container(
                            child:  BottomNavigationBar(
                                items: const <BottomNavigationBarItem>[
                                  BottomNavigationBarItem(
                                    icon: Icon(Icons.search),
                                    label: 'Browse',
                                  ),
                                  BottomNavigationBarItem(
                                    icon: Icon(Icons.history),
                                    label: 'History',
                                  ),
                                  BottomNavigationBarItem(
                                    icon: Icon(Icons.settings),
                                    label: 'Settings',
                                  ),
                                ],
                                currentIndex: controller.currentIndex.value,
                                selectedItemColor: Colors.pink,
                                onTap: controller.changePage,
                              ),

                          );
                        }
                      }

                  

currentIndex & onTap are defined in GetXController (LoginController)

2. GetXController

path: lib/controllers/login_controller.dart

define variables and function used in the widget

                  var currentIndex = 0.obs;
                  final pages = <String>['/home', '/login'];

                  void changePage(int index) {
                    currentIndex.value = index;
                    //Get.toNamed(pages[index], id: 1);
                    Get.offNamed(pages[index]);
                  }

                

changePage() is sued for tab switching Complete code

                  import 'package:get/get.dart';

                import 'dart:convert';
                import 'package:http/http.dart' as http;
                import 'package:vera/models/user_model.dart';




                class LoginController extends GetxController {


                  var currentIndex = 0.obs;
                  final pages = <String>['/home', '/login'];

                  void changePage(int index) {
                    currentIndex.value = index;
                    //Get.toNamed(pages[index], id: 1);
                    Get.offNamed(pages[index]);
                  }

                

                }

              

3. screen

We can add the bottom_nav widget whereever we want

path: lib/views/home_page.dart

Add BottomNavBar widget

              bottomNavigationBar:BottomNavBar()
              

Complete code

                
import 'package:flutter/material.dart';
import 'package:vera/controllers/home_controller.dart';
import 'package:get/get.dart';
import 'package:vera/widgets/drawer.dart';
import 'package:vera/widgets/bottom_nav.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      builder: (controller) => Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
        ),
        body: const Center(
          child: Text('Hello World!'),
        ),
        drawer:  NavDrawer(),
        bottomNavigationBar:BottomNavBar()
      ),

    );
  }
}